<template>
   <div id="cnyzs-system" class="GradientAnimation">
      <!-- 上部分 -->
      <div class="cnyzs-system-top">
         <!-- 模板1 -->
         <div class="template template-1">
            <img src="https://cos.alanoneup.com/cnyzs/1/image/2023/07/07/1688692527984-27.jpeg" alt="">
            <div class="text">
               多元化网站应用程序
            </div>
         </div>
         <!-- 模板2 -->
         <!-- 模板3 -->
         <!-- 模板4 -->
         <!-- 模板5 -->
         <!-- 模板6 -->
      </div>
      <!-- 下部分 -->
      <div class="cnyzs-system-bottom">
         <div class="list-options">
            <ul>
               <li :class="{ optionsActive: state.type === 0 }" @click="getpostslist(0)">最新</li>
               <li :class="{ optionsActive: state.type === 1 }" @click="getpostslist(1)">最新回复</li>
            </ul>
            <div class="right">
               <div class="Gonggao">我是一条很长很长的公告。（后台添加全局公告）</div>
               <div class="icon">
                  <span class="iconfont icon-noticetongzhi"></span>
               </div>
            </div>
         </div>
         <div class="m-1">
            <div class="posts-list">
               <ClientOnly>
                  <ul>
                     <!-- 置顶 -->
                     <li class="GradientAnimation" v-for="(item, index) in state.postsToplist" :key="index">
                        <!-- 头像个人信息 -->
                        <div class="list-title">
                           <el-popover :width="300">
                              <template #reference>
                                 <div class="list-title-image" @click="Utils.viewAuthor(item.postsUserId?.id)">
                                    <el-image :src="UtilsImage(item.postsUserId.useravatar)" fit="cover" lazy />
                                 </div>
                              </template>
                              <template #default>
                                 <div class="user-info-card">
                                    用户卡片信息：开发中
                                 </div>
                              </template>
                           </el-popover>
                           <div class="list-title-nameinfo">
                              <div class="name" @click="Utils.viewAuthor(item.postsUserId?.id)">
                                 {{ item.postsUserId.username }}
                              </div>
                              <div class="time">
                                 <span>{{ Utils.timeDisplay(item.createdAt) }}</span>
                                 <span class="lv">深圳</span>
                                 <span class="lv">Lv.1</span>
                              </div>
                           </div>
                           <!-- 设置 -->
                           <div class="info-set">
                              <div class="info-set-jiantou">
                                 <ClientOnly>
                                    <el-dropdown trigger="click" :teleported="false">
                                       <span class="iconfont icon-jiantou"></span>
                                       <template #dropdown>
                                          <el-dropdown-menu>
                                             <el-dropdown-item @click="Utils.viewPost(item)">
                                                查看帖子
                                             </el-dropdown-item>
                                             <el-dropdown-item @click="Utils.gosystem(item.postsSystemId?.systemSign)">
                                                进入社区
                                             </el-dropdown-item>
                                             <el-dropdown-item @click="Utils.viewAuthor(item.postsUserId?.id)">
                                                查看作者
                                             </el-dropdown-item>
                                             <el-dropdown-item v-if="userinfo._id"
                                                @click="Utils.blacklist(item.postsUserId?.id)">
                                                拉黑名单
                                             </el-dropdown-item>
                                             <el-dropdown-item v-if="userinfo._id"
                                                @click="Utils.reportContent(item.postsUserId?.id)">
                                                举报内容
                                             </el-dropdown-item>
                                             <el-dropdown-item v-if="userinfo._id && userinfo.userpower == 0" divided
                                                @click="Utils.globalTopping(item)">
                                                {{ item.postsGlobalTop === true ? '取消全局' : '全局置顶' }}
                                             </el-dropdown-item>
                                          </el-dropdown-menu>
                                       </template>
                                    </el-dropdown>
                                 </ClientOnly>
                              </div>
                           </div>
                        </div>
                        <!-- 标题 全局置顶 -->
                        <div class="content-title" v-if="item.postsTitle || item.postsGlobalTop"
                           @click="gopostsinfo(item)">
                           <div class="left" v-if="item.postsGlobalTop">
                              <span class="top" v-if="item.postsGlobalTop">全局置顶</span>
                           </div>
                           <div class="title">{{ item.postsTitle }}</div>
                        </div>
                        <!-- 内容 -->
                        <p class="list-content" :style="{ fontSize: item.postsTitle ? '16px' : '17px' }"
                           v-html="item.postsContent" @click="gopostsinfo(item)">
                        </p>
                        <!-- 视频 -->
                        <!-- 图片 -->
                        <div class="list-image" v-if="item.postsImages.length > 0" @click="gopostsinfo(item)">
                           <ClientOnly>
                              <div class="image-1" v-if="item.postsImages.length === 1">
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover"
                                       lazy />
                                 </div>
                              </div>
                              <div class="image-2" v-if="item.postsImages.length === 2">
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover"
                                       lazy />
                                 </div>
                              </div>
                              <div class="image-3" v-if="item.postsImages.length === 3">
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[2], true)" fit="cover"
                                       lazy />
                                 </div>
                              </div>
                              <div class="image-4" v-if="item.postsImages.length >= 4">
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[2], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div">
                                    <el-image :src="UtilsImage(item.postsImages[3], true)" fit="cover" lazy />
                                    <div class="residue" v-if="item.postsImages.length > 4">
                                       + {{ item.postsImages.length - 4 }}
                                    </div>
                                 </div>
                              </div>
                           </ClientOnly>
                        </div>
                        <!-- 标签 -->
                        <div class="list-topic" v-if="item.postsTags?.length > 0">
                           <span># 奶爸</span>
                           <span># 电动车</span>
                           <span># 萌娃</span>
                        </div>
                        <!-- 点赞 -->
                        <div class="list-like">
                           <div class="like-left">
                              <span class="iconfont icon-dianzan"></span>
                              <span>点赞</span>
                           </div>
                           <div class="like-right">
                              <div class="comment">
                                 <span class="iconfont icon-pinglun"></span>
                                 <span>{{ item.postsCommentNumber || 0 }}</span>
                                 <span v-if="item.postsCommentUserId?.username"
                                    @click="Utils.viewAuthor(item.postsCommentUserId?.id)">
                                    {{ item.postsCommentUserId?.username }}
                                 </span>
                              </div>
                           </div>
                        </div>
                     </li>
                     <!-- 帖子 -->
                     <li class="GradientAnimation" v-for="(item, index) in state.postslist" :key="index">
                        <!-- 头像个人信息 -->
                        <div class="list-title">
                           <el-popover :width="300">
                              <template #reference>
                                 <div class="list-title-image" @click="Utils.viewAuthor(item.postsUserId?.id)">
                                    <el-image :src="UtilsImage(item.postsUserId.useravatar)" fit="cover" lazy />
                                 </div>
                              </template>
                              <template #default>
                                 <div>
                                    用户卡片信息：开发中
                                 </div>
                              </template>
                           </el-popover>
                           <div class="list-title-nameinfo">
                              <div class="name" @click="Utils.viewAuthor(item.postsUserId?.id)">
                                 {{ item.postsUserId.username }}
                              </div>
                              <div class="time">
                                 <span>{{ UtilsDayjs(item.createdAt) }}</span>
                                 <span class="lv">深圳</span>
                                 <span class="lv">Lv.1</span>
                              </div>
                           </div>
                           <!-- 设置 -->
                           <div class="info-set">
                              <div class="info-set-jiantou">
                                 <ClientOnly>
                                    <el-dropdown trigger="click" :teleported="false">
                                       <span class="iconfont icon-jiantou"></span>
                                       <template #dropdown>
                                          <el-dropdown-menu>
                                             <el-dropdown-item @click="Utils.viewPost(item)">
                                                查看帖子
                                             </el-dropdown-item>
                                             <el-dropdown-item @click="Utils.gosystem(item.postsSystemId?.systemSign)">
                                                进入社区
                                             </el-dropdown-item>
                                             <el-dropdown-item @click="Utils.viewAuthor(item.postsUserId?.id)">
                                                查看作者
                                             </el-dropdown-item>
                                             <el-dropdown-item v-if="userinfo._id"
                                                @click="Utils.blacklist(item.postsUserId?.id)">
                                                拉黑名单
                                             </el-dropdown-item>
                                             <el-dropdown-item v-if="userinfo._id"
                                                @click="Utils.reportContent(item.postsUserId?.id)">
                                                举报内容
                                             </el-dropdown-item>
                                             <el-dropdown-item v-if="userinfo._id && userinfo.userpower == 0" divided
                                                @click="Utils.globalTopping(item)">
                                                {{ item.postsGlobalTop === true ? '取消全局' : '全局置顶' }}
                                             </el-dropdown-item>
                                          </el-dropdown-menu>
                                       </template>
                                    </el-dropdown>
                                 </ClientOnly>
                              </div>
                           </div>
                        </div>
                        <!-- 标题 推荐 置顶 -->
                        <div class="content-title" v-if="item.postsTitle" @click="gopostsinfo(item)">
                           <div class="title">{{ item.postsTitle }}</div>
                        </div>
                        <!-- 内容 -->
                        <p class="list-content" :style="{ fontSize: item.postsTitle ? '16px' : '17px' }"
                           v-html="item.postsContent" @click="gopostsinfo(item)">
                        </p>
                        <!-- 视频 -->
                        <!-- 图片 -->
                        <div class="list-image" v-if="item.postsImages.length > 0" @click="gopostsinfo(item)">
                           <ClientOnly>
                              <div class="image-1" v-if="item.postsImages.length === 1">
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover"
                                       lazy />
                                 </div>
                              </div>
                              <div class="image-2" v-if="item.postsImages.length === 2">
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover"
                                       lazy />
                                 </div>
                              </div>
                              <div class="image-3" v-if="item.postsImages.length === 3">
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[2], true)" fit="cover"
                                       lazy />
                                 </div>
                              </div>
                              <div class="image-4" v-if="item.postsImages.length >= 4">
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[0], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[1], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div"><el-image :src="UtilsImage(item.postsImages[2], true)" fit="cover"
                                       lazy />
                                 </div>
                                 <div class="div">
                                    <el-image :src="UtilsImage(item.postsImages[3], true)" fit="cover" lazy />
                                    <div class="residue" v-if="item.postsImages.length > 4">
                                       + {{ item.postsImages.length - 4 }}
                                    </div>
                                 </div>
                              </div>
                           </ClientOnly>
                        </div>
                        <!-- 标签 -->
                        <div class="list-topic" v-if="item.postsTags?.length > 0">
                           <span># 奶爸</span>
                           <span># 电动车</span>
                           <span># 萌娃</span>
                        </div>
                        <!-- 点赞 -->
                        <div class="list-like">
                           <div class="like-left">
                              <span class="iconfont icon-dianzan"></span>
                              <span>点赞</span>
                           </div>
                           <div class="like-right">
                              <div class="comment">
                                 <span class="iconfont icon-pinglun"></span>
                                 <span>{{ item.postsCommentNumber || 0 }}</span>
                                 <span v-if="item.postsCommentUserId?.username"
                                    @click="Utils.viewAuthor(item.postsCommentUserId?.id)">
                                    {{ item.postsCommentUserId?.username }}
                                 </span>
                              </div>
                           </div>
                        </div>
                     </li>
                     <!-- 状态 -->
                     <li v-if="state.postslist.length === 0" style="padding: 19px 20px;">
                        <el-empty :image-size="200" description="没有内容" />
                     </li>
                     <!-- 更多 -->
                     <li v-if="state.postslist.length >= 10 && state.ismore === true" ref="target"
                        style="display: flex;justify-content: center;" @click="loadMore">
                        加载更多
                     </li>
                     <li v-if="state.ismore === false" style="display: flex;justify-content: center;">
                        没有更多了
                     </li>
                  </ul>
               </ClientOnly>
            </div>
            <div class="m1-right">
               <!-- 热门据点 -->
               <div class="hot-stronghold">
                  <div class="title">
                     <ul>
                        <li :class="{ liactive: liactive === 0 }" @click="Hot">热门社区</li>
                        <li v-for="( item, index ) in  state.zonelist" :key="index"
                           :class="{ liactive: liactive === index + 1 }" @click="noHot(item._id, index)">
                           {{ item.zone_name }}
                        </li>
                     </ul>
                  </div>
                  <div class="content">
                     <ul>
                        <li class="JudianList" v-for="( item, index ) in  state.Forumlist" :key="index"
                           @click="gosystem(item.systemSign)">
                           <div class="image-bgc">
                              <img style="width: 100%; height: 100%;object-fit: cover;" :src="item.systemBackground"
                                 alt="">
                           </div>
                           <div class="zzc">
                              <div class="number">
                                 <span class="iconfont icon-wode"></span>
                                 <span class="num">{{ item.systemMember }}</span>
                              </div>
                              <div class="Judian-name">
                                 {{ item.systemName }}
                              </div>
                           </div>
                        </li>
                     </ul>
                     <div class="ApplyforOpen">
                        <div class="left" @click="">
                           <span class="iconfont icon-fabusekuai"></span>
                           <p>创建社区</p>
                        </div>
                        <div class="right">
                           <p>创建属于自己的社区。</p>
                           <p>社区拥有完全独立部署功能，独立的会员系统，独立的权限系统（任何一个成员都能独立控制权限），独立的管理页面，更有多元化类型让你意想不到的功能等你探索。（该文字后台自定义）</p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
const { cnyzs } = storeToRefs(cnyzsCommonpinia())
const { userinfo } = storeToRefs(cnyzsUserpinia())
useHead({
   title: "AOIR - 多元化网站应用程序"
})

const state = ref({
   optionsActive: 0,
   zonelist: [] as any,
   Forumlist: [] as any, // 社区系统列表
   postsToplist: [] as any,
   postslist: [] as any,
   limit: 10,
   page: 1,
   type: 0, // 0 最新帖子，1 最新回复帖子
   postsType: 0,
   ismore: true, // 有没有更多
})

// 获取分区列表
const queryZonelist = async () => {
   const res: any = await cnyzsRequest('/api/cnyzs-zone/list', { method: 'GET' })
   state.value.zonelist = res.data || []
}
// 获取所有社区系统列表
const queryForumlist = async () => {
   const res: any = await cnyzsRequest('/api/cnyzs-system/queryForumlist', {
      method: 'POST',
      data: {
         limit: state.value.limit,
         page: state.value.page
      }
   })
   state.value.Forumlist = res.data.data || []
}
// 获取指定分区下的社区系统列表
const queryZoneForumlist = async (zoneid: string) => {
   const res: any = await cnyzsRequest('/api/cnyzs-system/queryZoneForumlist', {
      method: 'POST',
      data: {
         limit: state.value.limit,
         page: state.value.page,
         zoneid: zoneid
      }
   })
   state.value.Forumlist = res.data.data || []
}
// 获取帖子列表
const getpostslist = async (type: number) => {
   // type：0 最新帖子，1 最新回复帖子

   let istype: number = state.value.type
   // 不同类型则重置页码页数
   if (state.value.type !== type) {
      state.value.type = type
      state.value.page = 1
      state.value.limit = 10
      state.value.ismore = true
   }

   const res: any = await cnyzsRequest('/api/cnyzs-system-posts/FrontPostslistAggregation', {
      method: 'POST',
      data: {
         page: state.value.page,
         limit: state.value.limit,
         postsType: state.value.postsType,
         type: state.value.type
      }
   })

   if (istype !== type) {
      state.value.postslist = []
   }
   state.value.postsToplist = res.data.toplist
   state.value.postslist = [...state.value.postslist, ...res.data.list]
   if (res.data.list.length < 10) {
      state.value.ismore = false
      if (process.client) {
         ElMessage.warning("没有更多了")
      }
   }


}

// 并发请求
await Promise.all([
   queryZonelist(), // 获取分区列表
   queryForumlist(), // 获取所有社区系统列表
])
getpostslist(0)


// 加载更多
const loadMore = () => {
   state.value.page = state.value.page + 1
   getpostslist(state.value.type)
}
// 点击帖子跳转至帖子详情页
const gopostsinfo = async (item: any) => {
   window.open('/' + item.postsId, '_blank')
}
// 点击系统：跳转至系统页
const gosystem = (systemSign: string) => {
   navigateTo('/System/' + systemSign)
}

const target = ref(null)
onMounted(() => {
   const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
         loadMore()
      }
   }, { threshold: 0 })
})





// 动态数据
const liactive = ref(0)
// 热门据点
const Hot = async () => {
   liactive.value = 0
   queryForumlist()
}
const noHot = async (_id: any, index: number) => {
   liactive.value = index + 1
   queryZoneForumlist(_id)
}
// 调用父方法打开详情页弹窗
const openPosts = (item: any) => {
   // emit('OpenPostsPop', item)
}
</script>
<style lang="scss" scoped>
#cnyzs-system {
   width: var(--aoir-m-width);
   margin: 0 auto 20px;
   min-height: 700px;
   min-height: 100vh;
}


.cnyzs-system-top {
   width: 100%;
   background-color: #ffffff;
   border-radius: var(--aoir-border-radius);
   box-shadow: var(--aoir-box-shadow);
   padding: 15px;

   .template-1 {
      width: 100%;
      height: 300px;
      position: relative;

      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: var(--aoir-border-radius) var(--aoir-border-radius);
         box-shadow: 0 0 40px 0px #37373733;
         cursor: pointer;
      }

      .text {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 60px;
         color: #fff;
         text-shadow: 0 0 4px rgba(0, 0, 0, .5);
      }
   }
}

// .cnyzs-system-bottom {}

.list-options {
   width: 100%;
   // background-color: rgb(249 249 249 / 76%);
   border-radius: 0 0 var(--aoir-border-radius) var(--aoir-border-radius);
   // margin-bottom: 16px;
   padding: 15px 0px 15px 15px;
   display: flex;

   ul {
      display: flex;

      li {
         padding: 8px 18px;
         margin-right: 10px;
         background: #fff;
         color: #555;
         border-radius: 6px;
         transition: all .2s ease-in-out;
         box-shadow: 0px 0px 35px 0px rgb(181 181 181 / 24%);

         &:hover {
            background-color: var(--aoir-color-primary);
            color: #FFF;
            cursor: pointer;
         }
      }

      .optionsActive {
         background-color: var(--aoir-color-primary);
         color: #FFF;
         cursor: pointer;
      }
   }

   .right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 20px;
      background-color: #ffffff85;
      border-radius: 7px;
      padding: 0 15px;
      cursor: pointer;

      .Gonggao {
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: flex-end;
      }

      .icon {
         position: relative;
         margin-left: 15px;
         transform: rotate(180deg);

         .iconfont {
            font-size: 20px;
            font-weight: 600;
            color: #e64355;
         }
      }
   }
}

.m-1 {
   display: flex;
   justify-content: space-between;

   .posts-list {
      width: 580px;

      ul {
         width: 100%;
         height: 100%;

         li {
            width: 100%;
            padding: 15px 15px 20px;
            border-bottom: 1px solid #EEE;
            border-radius: 10px;
            transition: all .2s;
            position: relative;
            z-index: 1;
            background: #FFF;
            margin-bottom: 10px;
            box-shadow: var(--aoir-box-shadow);

            &:hover {
               background: #FFF;
               box-shadow: 0px 0px 20px 0px rgba(181, 181, 181, 0.367);
               // box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.45);
               // transform: translateY(-15px);
               z-index: 10;
            }

            .list-title {
               display: flex;
               margin-bottom: 15px;

               .list-title-image {
                  width: 42px;
                  height: 42px;
                  border-radius: 25px;
                  box-shadow: 0 0 10px #CCC;
                  overflow: hidden;
                  margin-right: 12px;
                  cursor: pointer;
               }

               .list-title-nameinfo {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;

                  .name {
                     font-size: 18px;
                     cursor: pointer;
                     color: #777777;
                     // font-weight: 700;

                     span {
                        margin-right: 10px;
                     }
                  }

                  .time {
                     color: #999;
                     font-size: 14px;

                     span {
                        margin-right: 10px;
                     }

                     .lv {
                        color: #b8b8b8;
                        padding: 1px 5px;
                        font-size: 12px;
                        border-radius: 3px;
                        background: #FAFAFA;
                        font-weight: 600;
                     }
                  }
               }

               .info-set {
                  flex: 1;
                  display: flex;
                  justify-content: flex-end;

                  .info-set-jiantou {
                     .iconfont {
                        font-size: 25px;
                        color: #bababa;
                        cursor: pointer;
                     }
                  }
               }
            }

            .content-title {
               width: 100%;
               font-size: 18px;
               padding: 0 15px;
               display: flex;
               align-items: center;
               justify-content: flex-start;
               margin-bottom: 5px;
               cursor: pointer;

               .left {
                  display: flex;
                  align-items: center;

                  .top {
                     margin-right: 10px;
                     font-size: 13px;
                     font-weight: 600;
                     color: #FFF;
                     background-color: #e64355;
                     border-radius: 5px;
                     padding: 4px 8px;
                     float: left;
                  }

                  .recommend {
                     margin-right: 10px;
                     font-size: 13px;
                     font-weight: 600;
                     color: #FFF;
                     background-color: #5540a3;
                     border-radius: 5px;
                     padding: 4px 8px;
                     float: left;
                  }
               }

               .title {
                  flex: 1;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  line-height: 1.4;
                  max-height: 1.4em;
                  position: relative;
               }

               &:hover {
                  opacity: .7;
               }
            }

            .list-content {
               margin: 0px 0 15px;
               padding: 0 15px;
               font-size: 16px;
               color: #444444;
               cursor: pointer;

               // 展示两行
               overflow: hidden;
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
               line-height: 1.4;
               max-height: 3.4em;
               white-space: pre-wrap;
               line-height: 28px;
               position: relative;

               &:hover {
                  opacity: .7;
               }
            }

            .list-image {
               padding: 0 15px;
               cursor: pointer;
               margin-bottom: 20px;
               border-radius: var(--aoir-border-radius);

               .el-image,
               .div {
                  border-radius: var(--aoir-border-radius);
                  min-height: 134px;
                  overflow: hidden;
               }

               .image-1 {
                  width: 100%;
                  border-radius: 10px;

                  .div {
                     width: 49%;
                     box-shadow: 0 0 5px #a0a0a02b;
                  }

                  .el-image {
                     width: 100%;
                  }
               }

               .image-2 {
                  display: flex;

                  .div {
                     // width: 135px;
                     width: 49%;
                     height: 150px;
                     margin-right: 15px;
                     box-shadow: 0 0 5px #a0a0a02b;

                     .el-image {
                        width: 100%;
                        height: 100%;
                     }

                     &:nth-child(2) {
                        margin-right: 0px;
                     }
                  }
               }

               .image-3 {
                  display: flex;
                  justify-content: space-between;


                  .div {
                     flex: 1;
                     height: 135px;
                     margin-right: 15px;
                     box-shadow: 0 0 5px #a0a0a02b;

                     .el-image {
                        width: 100%;
                        height: 100%;
                     }

                     &:nth-child(3) {
                        margin-right: 0px;
                     }
                  }
               }

               .image-4 {
                  display: flex;
                  flex-wrap: wrap;

                  .div {
                     width: 49%;
                     height: 150px;
                     margin-right: 10px;
                     margin-bottom: 10px;
                     box-shadow: 0 0 5px #a0a0a02b;
                     position: relative;

                     .residue {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: #44444436;
                        border-radius: var(--aoir-border-radius);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 30px;
                        color: #F5F5F5;
                        font-weight: 600;
                     }

                     .el-image {
                        width: 100%;
                        height: 100%;
                     }

                     &:nth-child(2n) {
                        margin-right: 0px;
                     }

                     &:nth-child(3) {
                        margin-bottom: 0px;
                     }

                     &:nth-child(4) {
                        margin-bottom: 0px;
                     }
                  }
               }
            }

            .list-topic {
               width: 100%;
               margin-bottom: 15px;
               // padding-left: 60px;
               padding: 0 15px;

               span {
                  margin-right: 15px;
                  color: #009688;
                  // text-shadow: 0 0 0.5px #009688;
                  cursor: pointer;
                  transition: all .2s;
                  font-size: 16px;

                  &:hover {
                     opacity: 0.5;
                  }
               }
            }

            .list-like {
               width: 100%;
               position: relative;
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 0 6px;

               .like-left {
                  color: #777;

                  &:hover {
                     opacity: .8;
                  }

                  span {
                     cursor: pointer;

                     &:nth-child(1) {
                        margin-right: 5px;
                        font-size: 20px;
                     }

                     &:nth-child(2) {
                        font-size: 15px;
                     }
                  }
               }

               .like-right {
                  flex: 1;
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  color: #777;

                  .comment {
                     display: flex;
                     justify-content: flex-end;
                     align-items: center;

                     &:hover {
                        opacity: .8;
                        color: #968900;
                     }

                     span {
                        cursor: pointer;
                        font-size: 15px;

                        &:nth-child(1) {
                           margin-right: 5px;
                           font-size: 20px;
                        }

                        &:nth-child(2) {
                           margin: 0;
                        }

                        &:nth-child(3) {
                           margin: 0 0px 0 15px;
                           font-size: 15px;
                        }
                     }
                  }
               }
            }
         }
      }
   }

   .m1-right {
      width: calc(100% - 596px);
      height: auto;
      margin-left: 16px;

      .hot-stronghold {
         width: 100%;
         background-color: #FFF;
         padding: 15px 15px 15px;
         border-radius: var(--aoir-border-radius);

         .title {
            width: 100%;
            font-size: 16px;
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            ul {
               width: 100%;
               display: flex;

               li {
                  color: #777;
                  margin-right: 20px;
                  background-color: #FFF;
                  cursor: pointer;
                  transition: all .3s;

                  &:hover {
                     color: var(--aoir-color-primary);
                     font-weight: 600;
                  }
               }

               .liactive {
                  color: #525252;
                  font-weight: 600;
               }
            }
         }

         .content {
            width: 100%;

            ul {
               width: 100%;
               display: flex;
               flex-wrap: wrap;

               li {
                  width: 180px;
                  height: 115px;
                  margin-right: 15px;
                  margin-bottom: 15px;
                  background-color: #F5F5F5;
                  position: relative;
                  border-radius: var(--aoir-border-radius);
                  cursor: pointer;
                  transition: all .2s;

                  .image-bgc {
                     position: absolute;
                     top: 0;
                     width: 100%;
                     height: 100%;
                     border-radius: var(--aoir-border-radius);
                     box-shadow: 0 0 8px 0 rgb(70 70 70 / 26%);

                     img {
                        border-radius: var(--aoir-border-radius);
                     }
                  }

                  .zzc {
                     position: absolute;
                     top: 0;
                     width: 100%;
                     height: 100%;
                     z-index: 2;
                     border-radius: var(--aoir-border-radius);
                     // background-color: rgb(255 255 255 / 20%);
                     overflow: hidden;
                     transition: all .2s;

                     .number {
                        padding: 10px;

                        .iconfont {
                           font-weight: 600;
                           font-size: 16px;
                           color: #FFF;
                           margin-right: 10px;
                        }

                        .num {
                           font-size: 16px;
                           font-weight: 600;
                           color: #FFF;
                        }
                     }

                     .Judian-name {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        height: 35px;
                        background-color: #ffffffd1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                     }
                  }

                  &:hover {
                     box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.45);
                     transform: translateY(-2px);

                     .zzc {
                        background-color: rgb(255 255 255 / 0%);
                     }
                  }

                  &:nth-child(3n) {
                     margin-right: 0;
                  }
               }
            }

            .ApplyforOpen {
               display: flex;

               .left {
                  width: 180px;
                  height: 115px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-right: 15px;
                  border: 1.5px solid rgb(0 0 0 / 14%);
                  border-radius: var(--aoir-border-radius);
                  color: var(--aoir-color-primary);
                  flex-direction: column;
                  background-color: #FFF;
                  cursor: pointer;
                  transition: all .2s;

                  &:hover {
                     box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.45);
                     transform: translateY(-2px);
                  }

                  .iconfont {
                     margin-bottom: 10px;
                     font-size: 25px;
                     font-weight: 600;
                  }
               }

               .right {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;

                  p {
                     &:nth-child(1) {
                        margin-bottom: 5px;
                     }

                     &:nth-child(2) {
                        color: #777;
                        font-size: 14px;
                        line-height: 20px;
                     }
                  }
               }
            }
         }
      }

      .me-stronghold {
         width: 100%;

         .title {
            width: 100%;
            font-weight: 600;
         }
      }
   }
}


// :deep(.el-dialog) {

//    header {
//       display: none;
//    }

//    .el-dialog__header {
//       display: none !important;
//    }
// }

// :deep(.el-dialog.is-draggable .el-dialog__header) {
//    display: none !important;
// }

// .el-popper.is-light {
//    .user-info-card {
//       padding: 20px;
//    }
// }
</style>